<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:required="http://www.w3.org/1999/xhtml"
      layout:decorate="~{/layout}">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>地址管理</title>

        <div th:replace="commons/css/css_personal::personal_css"></div>
        <link th:href="@{/personal/css/infstyle.css}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
        <div th:replace="commons/css/css_header_footer :: public_css1"></div>
        <div th:replace="commons/js/js_header_footer :: public_js1"></div>
        <div th:replace="commons/js/js_personal::personal_js"></div>

	</head>

	<body>
		<!-- Preloader -->
		<div id="preloader" class="preloader">
			<div class="loader-cube">
				<div class="loader-cube__item1 loader-cube__item"></div>
				<div class="loader-cube__item2 loader-cube__item"></div>
				<div class="loader-cube__item4 loader-cube__item"></div>
				<div class="loader-cube__item3 loader-cube__item"></div>
			</div>
		</div>
		<!-- End Preloader -->

		<!--头 -->
		<div th:replace="commons/header::public_header"></div>

		<b class="line"></b>

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-address">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr/>
						<ul id="table_address" class="am-avg-sm-1 am-avg-md-3 am-thumbnails">


						</ul>
						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr/>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form class="am-form am-form-horizontal" id="address_form">

										<div class="am-form-group">
											<label for="user-name" class="am-form-label">收货人</label>
											<div class="am-form-content">
												<input type="text" id="user-name" name="conname" placeholder="收货人" required:true>
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label">手机号码</label>
											<div class="am-form-content">
												<input id="user-phone" name="contel" placeholder="手机号必填" type="email">
											</div>
										</div>
										<div class="am-form-group">
											<label  class="am-form-label">所在地</label>
											<div class="am-form-content address">
                                                <select class="province" id="province" name="province">
                                                    <option >请选择</option>
                                                </select>
                                                <select  class="city" id="city" name="city">
                                                    <option ></option>
                                                </select>

                                                <select class="county" id="county" name="county">
                                                    <option ></option>
                                                </select>
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<textarea class="" rows="1" id="user-intro"  name="detailaddr" placeholder="输入详细地址"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" id="address_save">保存</a>
												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>

					<script type="text/javascript">
						$(document).ready(function() {							
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});
							
							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}
							
						})
					</script>

					<div class="clear"></div>

				</div>
				<!--底部-->
				<div th:replace="commons/personal_footer::personal_footer"></div>
			</div>

			<div th:replace="commons/personal_footer::personal_menu"></div>
		</div>


        <script th:src="@{/assets/js/area2.js}"></script>
        <script th:src="@{/assets/js/select.js}"></script>
	</body>
    <script>
        $(document).ready(function () {
            changeStatus();
            showAddress();
            savaAddress();
        })

        var addressData = "";

        function changeStatus() {
            $("#li_address").addClass("active");
        }

        function showAddress() {
            $.ajax({
                url: "/users/addressjson",
                dataType: "json",
                contentType: "application/json",
                success: function (result) {
                    build_address_table(result.info.addressList);
                }
            });
        }

        function build_address_table(result) {
            var html = "";
            $.each(result,function (index,item) {
                html = "";
                if(item.status == 1){
                    html = "\t\t\t\t\t\t\t<li class=\"user-addresslist defaultAddr\" id='li_default'>\n" +
                           "\t\t\t\t\t\t\t\t<span class=\"new-option-r\" onclick='setDeafultAddress(this)'><i class=\"am-icon-check-circle\" ></i>默认地址</span>\n";
                }else{
                    html = "\t\t\t\t\t\t\t<li class=\"user-addresslist\" id='li_default'>\n" +
                           "\t\t\t\t\t\t\t\t<span class=\"new-option-r\" onclick='setDeafultAddress(this)'><i class=\"am-icon-check-circle\"></i>设为默认</span>\n";
                }
                 html +=
                    "\t\t\t\t\t\t\t\t<p class=\"new-tit new-p-re\">\n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"new-txt\">" + item.conname + "</span>\n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"new-txt-rd2\">" + item.contel + "</span>\n" +
                    "\t\t\t\t\t\t\t\t</p>\n" +
                    "\t\t\t\t\t\t\t\t<div class=\"new-mu_l2a new-p-re\">\n" +
                    "\t\t\t\t\t\t\t\t\t<p class=\"new-mu_l2cw\">\n" +
                    "\t\t\t\t\t\t\t\t\t\t<span class=\"title\">地址：</span>\n" +
                    "\t\t\t\t\t\t\t\t\t\t<span class=\"province\">" + item.province + "</span>\n" +
                    "\t\t\t\t\t\t\t\t\t\t<span class=\"city\" >" + item.city + "</span>\n" +
                    "\t\t\t\t\t\t\t\t\t\t<span class=\"county\" >" + item.county + "</span>\n" +
                    "\t\t\t\t\t\t\t\t\t\t<span class=\"street\" >" + item.detailaddr + "</span></p>\n" +
                    "\t\t\t\t\t\t\t\t</div>\n" +
                    "\t\t\t\t\t\t\t\t<div class=\"new-addr-btn\">\n" +

                     "<span id=\"addressId\" style=\"display: none\">" + item.addressid + "</span>\n"+

                    "\t\t\t\t\t\t\t\t\t<a onclick='editAddress(this)' editAddress><i class=\"am-icon-edit\"></i>编辑</a>\n" +
                    "\t\t\t\t\t\t\t\t\t<span class=\"new-addr-bar\">|</span>\n" +
                    "\t\t\t\t\t\t\t\t\t<a onclick='delClick(this)'><i  class=\"am-icon-trash\"></i>删除</a>\n" +
                    "\t\t\t\t\t\t\t\t</div>\n" +
                    "\t\t\t\t\t\t\t</li>\n";

                $("#table_address").append(html);
            });

        }

        function savaAddress() {
            $("#address_save").click(function () {
                // var formData = new FormData($("#formid")[0]);
                // console.log($("#user-name").val() + "  " + $("#user-phone").val() + " " + $("#province").val() +" " + $("#user-intro").val());

                var data = $("#address_form").serialize() + addressData;

                $.ajax({
                    url: "/users/insertAddr",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: data,
                    success: function (result) {
                        if(addressData != ""){
                            layer.msg("修改成功");
                            addressData = "";
						}else{
                            layer.msg(result.msg);
                            console.log(result.info.addressId);
                            var html =  "\t\t\t\t\t\t\t<li class=\"user-addresslist\">\n" +
                                "\t\t\t\t\t\t\t\t<span class=\"new-option-r\" onclick='setDeafultAddress(this)'><i class=\"am-icon-check-circle\" ></i>设为默认</span>\n" +
                                "\t\t\t\t\t\t\t\t<p class=\"new-tit new-p-re\">\n" +
                                "\t\t\t\t\t\t\t\t\t<span class=\"new-txt\">" + $("#user-name").val() + "</span>\n" +
                                "\t\t\t\t\t\t\t\t\t<span class=\"new-txt-rd2\">" + $("#user-phone").val() + "</span>\n" +
                                "\t\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t\t\t<div class=\"new-mu_l2a new-p-re\">\n" +
                                "\t\t\t\t\t\t\t\t\t<p class=\"new-mu_l2cw\">\n" +
                                "\t\t\t\t\t\t\t\t\t\t<span class=\"title\">地址：</span>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<span class=\"province\">" + $("#province").val() + "</span>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<span class=\"city\" >" + $("#city").val() + "</span>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<span class=\"dist\" >" + $("#county").val() + "</span>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<span class=\"street\" >" + $("#user-intro").val() + "</span></p>\n" +
                                "\t\t\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t\t\t<div class=\"new-addr-btn\">\n" +

                                "<span id=\"addressId\" style=\"display: none\">" + result.info.addressId + "</span>\n"+

                                "\t\t\t\t\t\t\t\t\t<a onclick='editAddress(this)'><i class=\"am-icon-edit\"></i>编辑</a>\n" +
                                "\t\t\t\t\t\t\t\t\t<span class=\"new-addr-bar\">|</span>\n" +
                                "\t\t\t\t\t\t\t\t\t<a onclick='delClick(this)'><i  class=\"am-icon-trash\"></i>删除</a>\n" +
                                "\t\t\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t\t</li>\n";

                            $("#table_address").append(html);
						}

                    }
                })
            })
        }

        function delClick(object) {
            //找到当前标签的父节点下面的两个<span>标签
            var input = $(object).parent('div').find('span');
            //input.eq(0) 取到第一个<span> 标签

            $.ajax({
                url: "/users/deleteAddr",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {"addressId":input.eq(0).text()},
                success: function (result) {
                    layer.msg(result.msg);
                    $(object).parent('div').parent('li').hide();
                    // console.log($(object).parent('div').parent('li'));
                    // var clone = $(object).parent('div').parent('li').clone();
                    // $("#table_address").append(clone);
                }
            });
        }

        function setDeafultAddress(object) {
            //取到默认地址存有addressId的<span>标签
            // li_default.find('#addressId').text();
            //取到当前标签存有addressId的<span>标签
            // console.log(li_parent.find('#addressId').text());


            //取到默认地址的li标签
            var li_parent = $(object).parent('li');
            var li_default = $(object).parent('li').parent("ul").find('.defaultAddr');
            $.ajax({
                url: "/users/setDefault",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                data: {
                    "default_id":li_default.find('#addressId').text(),
					"address_id":li_parent.find('#addressId').text()
				},
                success: function (result) {
                    layer.msg(result.msg);


                    //取到默认地址的span标签
                    li_default.find('span').eq(0).text("设为默认");
                    li_default.removeClass("defaultAddr");

                    //取到当前标签 设为默认 的span标签
                    li_parent.find('span').eq(0).text("默认地址");
                    li_parent.addClass("defaultAddr");
                }
            })
        }


        
        function editAddress(object) {
            var li_parent = $(object).parent('div').parent('li').find('span');
            $("#user-name").val(li_parent.eq(1).text());
			$("#user-phone").val(li_parent.eq(2).text());
			$("#province").val(li_parent.eq(4).text());
			$("#city").val(li_parent.eq(5).text());
			$("#county").val(li_parent.eq(6).text());
			$("#user-intro").val(li_parent.eq(7).text());


            addressData = "&addressid=" + $(object).parent('div').find("#addressId").text();
        }
    </script>
</html>